<template>
	<canvas ref="canvas" :style="options.style"></canvas>
</template>

<script>
	import Schart from '/vue/components/charts/schart/index.js';
	import Vue from "/vue/libs/vue.esm.browser.min.js";
	let comname = 'simple-chart';
	let obj = {};
	window.SimpleChart = obj;
	obj.show = function (mount, options) {
		new Vue({
			render: h => {
				return h(comname,
					{
						props: {
							options
						}
					}
				);
			},			
		}).$mount(mount);
	};

	module.exports = {
		name: comname,
		props: {
			options: {
				type: Object,
				required: true
			}
		},
		mounted() {
			this.renderChart();
		},
		methods: {
			renderChart() {
				if (!this.checkOptions()) {
					return;
				}
				const opt = { ...this.options };
				/* eslint-disable no-new */
				new Schart(this.$refs.canvas, opt);
			},
			checkOptions() {
				const opt = this.options;
				if (!opt.datasets || !opt.datasets.length) {
					return false;
				}
				if (!opt.labels || !opt.labels.length) {
					return false;
				}
				return true;
			}
		},
		watch: {
			options: {
				handler(newValue, oldValue) {
					this.renderChart();
				},
				deep: true
			}
		}
	};

</script>